<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
  <style>
    /* 定义提示框的基础样式 */
    .msg{
      display:inline-block;
      width:160px;
      height:25px;
      border:1px solid #555;
      text-align:center;
      line-height:25px;
    }
    /* 定义提示框在验证通过时的样式 */
    .success{
      border:1px solid green;
      background-color:lightgreen;
      color:green
    }
    /* 定义提示框在验证失败时的样式 */
    .fail{
      border:1px solid red;
      background-color:pink;
      color:red
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 因为要获得用户输入的手机号进行验证，所有必须用双向绑定 -->
    <input type="text" v-model="phone">
    <!-- 因为提示框的样式可能在success和fail之间来回切换，所以动态绑定span的部分class 
        又因为提示框的内容也可能随验证结果而动态变化，所以也要绑定一个变量msg-->
    <!--                       class名  变量-->
    <!-- <span class="msg" :class="{success:success, fail:fail}">{{msg}}</span> -->
    <!--结果: 哪个class名后的变量值为true，才会进入最终的class字符串中。变量值为false的class，不会出现在最终的class字符串中-->
    <!-- <span class="msg" :class="{success:isRight, fail:isRight==false}">{{isRight==true?"手机号可用":"手机号格式错误！"}}</span> -->
    <span class="msg" :class="isRight==true?'success':'fail'">{{isRight==true?"手机号可用":"手机号格式错误！"}}</span>
    <!--界面中共需要四个变量-->
    <!--但是，两个class和错误提示三个变量的值，都和验证结果这一个数据有关！所有，其实只用一个变量就可控制三个值的变化-->
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        //因为页面中需要三个变量，所以data中就要有三个变量
        phone:"", //实时接用户在文本框中输入的手机号
        isRight:false
      },
      watch:{
        //因为用户一边输入，vue就一边验证，所以必须用watch随时监控用于的输入变化。
        phone(){
          //定义正则验证phone的内容
          var reg=/^1[3-9]\d{9}$/;
          //将验证结果保存到变量isRight中，依次牵连着三个位置发生变化！
          this.isRight=reg.test(this.phone);
        }
      }
    })
  </script>
</body>

</html>